<!-- 
	This is the dashboard page, it uses the dashboard layout in: 
	"./layouts/Dashboard.vue" .
 -->

<template>
	<div>
		<!-- Counter Widgets -->
		<a-row :gutter="24">
<!--			<a-col :span="24" :lg="12" :xl="6" class="mb-24" v-for="(stat, index) in stats" :key="index">-->
<!--				&lt;!&ndash; Widget 1 Card &ndash;&gt;-->
<!--				<WidgetCounter-->
<!--					:title="stat.title"-->
<!--					:value="stat.value"-->
<!--					:prefix="stat.prefix"-->
<!--					:suffix="stat.suffix"-->
<!--					:icon="stat.icon"-->
<!--					status="1"-->
<!--				></WidgetCounter>-->
<!--				&lt;!&ndash; / Widget 1 Card &ndash;&gt;-->
<!--			</a-col>-->


      <a-col :span="24" :lg="12" :xl="24" class="mb-24" >
        <!-- Widget 1 Card -->
        <WidgetCounterMy
           v-model="searchItem"
           @valueChange="searchValueChange"
           @searchChange="getListDateS"
        ></WidgetCounterMy>

        <!-- / Widget 1 Card -->
      </a-col>

		</a-row>





		<!-- / Counter Widgets -->
    <div style="background-color: #ffffff">
      <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
        <div slot="footer"><b>ant design vue</b> footer part</div>

        <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">

          <template v-for="{ type, text } in actions" slot="actions">

          <span :key="type">
          <a-icon :type="type" style="margin-right: 8px" />
          {{ text }}
          </span>
          </template>
          <img
              slot="extra"
              width="272"
              alt="logo"
              :src=item.indexImgPath
          />
          <a-list-item-meta :description="item.lostType+'   '+item.tagsString" >
            <router-link slot="title" :to="{name:'lostInfo',query: {data:item.lostId}}">
            {{ item.title }}</router-link>
            <a-avatar slot="avatar" :src="item.avatar" />
          </a-list-item-meta>
          {{ item.text }}
          {{ item.text }}
          <div>发布时间: {{ moment(item.createTime).fromNow() }} 最后回复时间: {{ moment(item.lostMessageTime).fromNow() }}</div>
        </a-list-item>

      </a-list>

    </div>





		<!-- / Cards -->

	</div>

</template>

<script>
  import moment from 'moment';
  moment.locale("zh-cn");
	// Bar chart for "Active Users" card.
	import CardBarChart from '../components/Cards/CardBarChart' ;

	// Line chart for "Sales Overview" card.
	import CardLineChart from '../components/Cards/CardLineChart' ;

	// Counter Widgets
	import WidgetCounter from '../components/Widgets/WidgetCounter' ;
  import WidgetCounterMy from '../components/Widgets/WidgetCounterMy' ;

	// "Projects" table component.
	import CardProjectTable from '../components/Cards/CardProjectTable' ;

	// Order History card component.
	import CardOrderHistory from '../components/Cards/CardOrderHistory' ;

	// Information card 1.
	import CardInfo from '../components/Cards/CardInfo' ;

	// Information card 2.
	import CardInfo2 from '../components/Cards/CardInfo2' ;


	const stats = [
		{
			title: "本周新增失物量",
			value: 53000,

			suffix: "+30%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6V7H5C4.49046 7 4.06239 7.38314 4.00612 7.88957L3.00612 16.8896C2.97471 17.1723 3.06518 17.455 3.25488 17.6669C3.44458 17.8789 3.71556 18 4 18H16C16.2844 18 16.5554 17.8789 16.7451 17.6669C16.9348 17.455 17.0253 17.1723 16.9939 16.8896L15.9939 7.88957C15.9376 7.38314 15.5096 7 15 7H14V6C14 3.79086 12.2091 2 10 2ZM12 7V6C12 4.89543 11.1046 4 10 4C8.89543 4 8 4.89543 8 6V7H12ZM6 10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10ZM13 9C12.4477 9 12 9.44772 12 10C12 10.5523 12.4477 11 13 11C13.5523 11 14 10.5523 14 10C14 9.44772 13.5523 9 13 9Z" fill="#111827"/>
						</svg>`,
		},
		{
			title: "本年新增失物量",
			value: 3200,
			suffix: "+20%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6V7H5C4.49046 7 4.06239 7.38314 4.00612 7.88957L3.00612 16.8896C2.97471 17.1723 3.06518 17.455 3.25488 17.6669C3.44458 17.8789 3.71556 18 4 18H16C16.2844 18 16.5554 17.8789 16.7451 17.6669C16.9348 17.455 17.0253 17.1723 16.9939 16.8896L15.9939 7.88957C15.9376 7.38314 15.5096 7 15 7H14V6C14 3.79086 12.2091 2 10 2ZM12 7V6C12 4.89543 11.1046 4 10 4C8.89543 4 8 4.89543 8 6V7H12ZM6 10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10ZM13 9C12.4477 9 12 9.44772 12 10C12 10.5523 12.4477 11 13 11C13.5523 11 14 10.5523 14 10C14 9.44772 13.5523 9 13 9Z" fill="#111827"/>
						</svg>`,
		},
		{
			title: "失物未确认数量总计",
			value: 1200,

			status: "danger",
			suffix: "-20%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M3.17157 5.17157C4.73367 3.60948 7.26633 3.60948 8.82843 5.17157L10 6.34315L11.1716 5.17157C12.7337 3.60948 15.2663 3.60948 16.8284 5.17157C18.3905 6.73367 18.3905 9.26633 16.8284 10.8284L10 17.6569L3.17157 10.8284C1.60948 9.26633 1.60948 6.73367 3.17157 5.17157Z" fill="#111827"/>
						</svg>`,
		},
		{
			title: "失物已确认数量总计",
			value: 13200,

			suffix: "+10%",
			icon: `
						<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6V7H5C4.49046 7 4.06239 7.38314 4.00612 7.88957L3.00612 16.8896C2.97471 17.1723 3.06518 17.455 3.25488 17.6669C3.44458 17.8789 3.71556 18 4 18H16C16.2844 18 16.5554 17.8789 16.7451 17.6669C16.9348 17.455 17.0253 17.1723 16.9939 16.8896L15.9939 7.88957C15.9376 7.38314 15.5096 7 15 7H14V6C14 3.79086 12.2091 2 10 2ZM12 7V6C12 4.89543 11.1046 4 10 4C8.89543 4 8 4.89543 8 6V7H12ZM6 10C6 9.44772 6.44772 9 7 9C7.55228 9 8 9.44772 8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10ZM13 9C12.4477 9 12 9.44772 12 10C12 10.5523 12.4477 11 13 11C13.5523 11 14 10.5523 14 10C14 9.44772 13.5523 9 13 9Z" fill="#111827"/>
						</svg>`,
		},
	] ;


  const listData = [
    {
      href: 'https://www.antdv.com/',
      loastId:-1,
      title: `寻猫启示 `,
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      description:
          'Ant Design, a design language for background applications, is refined by Ant UED Team.',
      content:
          'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    },
  ];


	export default ({
		components: {
			CardBarChart,
			CardLineChart,
			WidgetCounter,
      WidgetCounterMy,
			CardProjectTable,
			CardOrderHistory,
			CardInfo,
			CardInfo2,
		},
    beforeCreate() {



    },
    mounted(){
      this.getListDateS();
    },
    data() {
			return {
        //搜索相关参数
        searchItem:{

        },
				// Counter Widgets Stats
				stats,
        listData,
        pagination: {
          onChange: page => {
            console.log(page);
          },
          pageSize: 3,
        },
        actions: [
          { type: 'star-o', text: '156' },
          { type: 'like-o', text: '156' },
          { type: 'message', text: '2' },
        ],
        moment
			}
		},
    methods:{
      searchValueChange(e){
        console.log("查看传递的值",e);
        this.searchItem=e
      },
      getListDateS(){

        this.$http({
          method: 'post',
          url: 'http://localhost:18082/loatandfound/list',
          data: this.searchItem,
          headers:{
            user:localStorage.getItem("user"),
          }
        }).then((e)=>{

          let Chuli=[]

          e.data.data.forEach(item=>{
            let tagsString="";

            item.labels.forEach(item2=>{
              tagsString=tagsString+"-"+ item2.name;
            })

            Chuli.push({
              ...item,
              tagsString:tagsString
            })
          })

          this.listData=Chuli;



          console.log("查看当前事项",e);

        })
      }
    }
	})

</script>

<style lang="scss">
</style>